<template>
  <!-- 个人信息区 -->
         <el-card shadow="always" style="margin: 20px;width: 500px;">
          <el-form label-width="80px" size="small" >
            <el-upload
                class="avatar-uploader"
                :action="'http://'+serverIp+':9090/file/upload'"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
                <img v-if="form.avatarUrl" :src="form.avatarUrl" class="avatar">
                <el-icon v-else class="el-icon-plus avatar-uploader-icon"><Plus /></el-icon>
            </el-upload>
            <el-form-item label="用户名">
              <el-input disabled v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input type="textarea"  v-model="form.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
            <div style="text-align: center;">
                <el-button @click="save" type="primary">保存</el-button>
                <el-button type="warning">取消</el-button>
            </div>
            
        </el-card>


         <!-- 对话框 -->
         <el-dialog @close="handleClose"  title="用户信息" v-model="dialogFormVisible" width="30%" >
          <el-form label-width="80px" size="small">
            <el-form-item label="用户名">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <!-- <el-form-item label="角色">
              <el-select clearable v-model="form.role" placeholder="请选择角色" style="width: 100%">
                <el-option v-for="item in roles" :key="item.name" :label="item.name" :value="item.flag"></el-option>
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="性别">
              <el-input v-model="form.gender" autocomplete="off"></el-input>
            </el-form-item> -->
             <!-- <el-form-item label="性别">
              <el-select clearable v-model="gender" placeholder="请选择" style="width: 100%">
                <el-option label="男" value="1">
                </el-option>
                <el-option label="女" value="0">
                </el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="性别">
              <el-radio-group v-model="gender">
                <el-radio label="1">男</el-radio>
                <el-radio label="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄">
              <el-input v-model="form.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="爱好">
              <el-input v-model="form.hobby" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click=" this.dialogFormVisible = false,this.form = {}">取消</el-button>
                <el-button type="primary" @click="save">
                  确定
                </el-button>
              </span>
            </template>
        </el-dialog>
</template>

<script>
import bus from 'vue3-eventbus'
import {serverIp} from '../../public/config.js'

export default {
    name:"Person",
    data(){
        return {
          serverIp:serverIp,
            form:{
                
            },
            user:localStorage.getItem("user") ?
                JSON.parse(localStorage.getItem("user")) : {},
          
          dialogFormVisible:false,
        }
    },
    created(){
        this.getUser().then(res => {
            this.form = res
            // this.form.avatarUrl = res.avatarUrl.replace("localhost","124.223.163.123")
            //console.log("@@@",this.form)
        })
    },
    methods:{
         async getUser() {
            return (await this.request.get("/user/username/" + this.user.username)).data
            },
        // 保存
        save(){
            this.request.post("/user",this.form).then(res => {
              //发送给后台
              //console.log("发送给后台",this.form);
                if(res.data){
                  //console.log("###",res);
                    this.$message.success("保存成功")
                    // 更新浏览器存储的用户信息
                    this.getUser().then(res => {
                        res.token = JSON.parse(localStorage.getItem("user")).token
                        localStorage.setItem("user", JSON.stringify(res))
                    })
                    //bus更新header头像
                    //console.log("通知header",this.form.avatarUrl);
                    bus.emit("updateAvatar",this.form.avatarUrl)
                }else{
                    this.$message.error("保存失败")
                }
            })
            
        },
        handleAvatarSuccess(res) {
          //console.log("tx",res);
          // res = res.replace("localhost","124.223.163.123")
            this.form.avatarUrl = res
            }
    },
}
</script>

<style>
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>